<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="200" align="bottom">
        <el-col :span="4">
          <el-input style="width: 200px" v-model="courseName" autosize prefix-icon="el-icon-document" placeholder="输入课程名搜索"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input style="width: 200px"  v-model="teacherName" autosize prefix-icon="el-icon-user-solid" placeholder="输入授课教师姓名"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button  type="primary" icon="document" @click="loadCourse" :loading="searchLoading">搜索</el-button>
          <el-button  type="primary" icon="document" @click="browserPickUp" >查看选课情况</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="height: -webkit-calc(100% - 50px);margin-top: 10px">
      <xjr-table @select-change="currentChange" @custom-click="handleCourse" ref="course_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
    <el-dialog :destroy-on-close="true"  width="30%" title="编辑课程" :visible.sync="showDialog">
      <el-form ref="form" :model="course" label-width="80px" :rules="rules">
        <el-form-item label="课程名"  prop="courseName">
          <el-input v-model="course.courseName"></el-input>
        </el-form-item>
        <el-form-item label="任课教师" prop="teacherName">
          <el-input :disabled="true" v-model="course.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            disabled=""
            v-model="course.createTime"
            type="datetime"
            placeholder="修改创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
          <el-date-picker
            disabled=""
            v-model="course.updateTime"
            type="datetime"
            placeholder="修改更新时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发布者" prop="createOperator">
          <el-input :disabled="true" v-model="course.createOperator"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveCourse">保存</el-button>
        <el-button type="primary" @click="showDialog=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog ref="pickUp" :destroy-on-close="true"  top="15vh" title="选课情况概览" :visible.sync="showPickUp">
      <h2 align="center">{{currentCourse.courseName}}</h2>
      <xjr-table ref="pick_up_table" :list="pickUpTableData" :headers="pickUpTableCols"></xjr-table>
    </el-dialog>
  </div>
</template>

<script>
  import common  from './course-common'
    export default {
        name: "AdminCourseManage",
      mixins:[common],
      data() {
        return {
          rules:{},//校验规则
          course:{courseName:'',createTime:'',updateTime:'',createOperator:'',teacherName:''},//当前修改课程
          showDialog:false,
          currentCourse:{},
          showPickUp:false,
          pickUpTableData:[],
          pickUpTableCols:[
            {prop:'guid',label:'选修主键',sort:false,hidden:true},
            {prop:'gradeName',label:'年级',sort:false,hidden:false},
            {prop:'assistantName',label:'辅导员',sort:false,hidden:false},
            {prop:'studentName',label:'学生姓名',sort:false,hidden:false},
            {prop:'majorName',label:'专业',sort:false,hidden:false},
            {prop:'departmentName',label:'学院',sort:false,hidden:false}
          ],
          cols:[{prop:'courseNo',label:'课程号',sort:false,hidden:true},
            {prop:'courseName',label:'课程名',sort:false,hidden:false},
            {prop:'teacherName',label:'授课教师',sort:false,hidden:false},
            {prop:'createTime',label:'创建时间',sort:true,hidden:false,dataType:'date'},
            {prop:'updateTime',label:'更新时间',sort:true,hidden:false,dataType:'date'},
            {prop:'operate',label:'操作',hidden:false,options:[
                {label:'编辑',prop:'edit'},
                {label:'删除',prop:'delete',type:'danger'}
              ]}
          ]
        }
      },
      methods:{
        //修改保存课程
        async saveCourse(){
          //只允许修改课程名,需要先判断课程名是否存在
          let g=this;
          let haveExist=await g.$ajaxGet('/course/all',{courseName:g.course.courseName});
          if (!g.isNullOrEmpty(haveExist) && haveExist.length>0){
            g.message({message:'同名课程已存在！',type:'warning'});
          }else{
            g.$ajaxPost('/course/updateByCourseNo',{courseNo:g.course.courseNo,courseName:g.course.courseName}).then(res=>{
              g.showDialog=false;
              g.$nextTick(()=>{
                g.message({message:'更新成功！',type:'success'});
              })

            });
          }
        },
        //修改删除课程
        async handleCourse(index,row,customType){
          let g=this;
          if (customType==='edit'){
            this.showDialog=true;
            this.course={...row};
          }else{//删除课程
              g.$confirm('此操作将永久删除该课程以及该课程下所有的考勤信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                g.$ajaxDelete(`/course/deleteAllByCourseNo/${row.courseNo}`).then(result => {
                    g.message({
                      type: 'success',
                      message: '删除成功!'
                    })
                  }

                )
              }).catch(() => {
                g.message({
                  type: 'info',
                  message: '已取消删除'
                });
              });

          }
        },
          //当前行改变事件
        currentChange(rows){
          let g=this;
          if (rows.length==0){
            g.currentCourse={};
            return;
          }
          g.currentCourse=JSON.parse(JSON.stringify(rows[rows.length-1]));

        },
        //加载课程列表
        loadCourse(){
          let g=this;
          g.$ajaxGet('/course/getCourseListByKeyWords',{courseName:g.courseName,teacherName:g.teacherName}).then(data=>{
            g.tableData=data;
          })


        },
        browserPickUp(){
          let g=this;
          if (g.isEmptyObject(g.currentCourse)){
            g.message({message:'并没有选中任何课程',type:'error'});
            return;
          }else{
            g.$ajaxGet('/coursePickUpInfo/getPickUpListByCourse',{courseNo:g.currentCourse.courseNo}).then(data=>{
              g.pickUpTableData=data;
              g.$nextTick(()=>{
                g.showPickUp=true;
              })
            })

          }

        }
      },
      created() {


      }
    }
</script>

<style scoped>

</style>
